<template>
  <div class="security-container">
    <el-form :model="securitySettingsForm" ref="securitySettingsForm" label-width="160px">
      <div class="security-title">二次身份验证设置</div>
      <el-form-item label="开启密码验证：">
        <el-switch v-model="securitySettingsForm.password_auth"></el-switch>
      </el-form-item>
      <el-form-item label="开启短信验证码：">
        <el-switch v-model="securitySettingsForm.message_auth"></el-switch>
      </el-form-item>
      <div class="security-title">账户安全设置</div>
      <div class="security-one">1. <el-input v-model="securitySettingsForm.retry_cycle" :maxlength="8" type="number" />小时内，密码错误 <el-input v-model="securitySettingsForm.retry_times" :maxlength="8" type="number" />次，锁定 <el-input v-model="securitySettingsForm.lock_duration" :maxlength="8" type="number" />分钟</div>
      <div class="security-two">2. <el-input v-model="securitySettingsForm.sleep_threshold" :maxlength="8" type="number" />天不访问账户自动休眠</div>
      <div class="security-title">篡改数据扫描设置</div>
      <div class="security-one">每天扫描时长： <el-input v-model="securitySettingsForm.scanning_time" :maxlength="8" type="number" />小时</div>
      <div class="security-tip">每天24点开始扫描，超过上述时长停止扫描</div>
      <div class="security-two">报警手机号： <el-input v-model="securitySettingsForm.mobile" :maxlength="11" style="width: 200px" type="number" /></div>
      <div class="security-tip">发现数据被篡改，将发送消息至此手机号</div>
      <el-form-item label="">
        <el-button type="primary" @click="submitForm">保存设置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as API_SystemSetting from '@/api/systemSetting'
import { RegExp } from '~/ui-utils'
export default {
  name: 'systemSettingsSecurity',
  data() {
    return {
      securitySettingsForm: {
        password_auth: false, // 是否开启密码验证
        message_auth: false, // 是否开启短信验证码
        retry_cycle: 0, // 密码重试累加周期
        retry_times: 0, // 密码重试次数
        lock_duration: 0, // 锁定时长
        sleep_threshold: 0, // 休眠门槛
        scanning_time: 0, // 每天扫描时长
        mobile: '' // 报警手机号
      }
    }
  },
  mounted() {
    /** 获取安全设置 */
    API_SystemSetting.getAccountSetting().then(response => {
      response.password_auth = response.password_auth === 1
      response.message_auth = response.message_auth === 1
      this.securitySettingsForm = response
    })
  },
  methods: {
    // 保存设置
    submitForm() {
      this.$refs['securitySettingsForm'].validate((valid) => {
        if (valid) {
          const params = this.MixinClone(this.securitySettingsForm)
          if (!params.password_auth && !params.message_auth) {
            return this.$message.error('至少设置一种验证方式')
          }
          params.password_auth ? params.password_auth = 1 : params.password_auth = 0
          params.message_auth ? params.message_auth = 1 : params.message_auth = 0
          API_SystemSetting.editAccountSetting(params).then(() => {
            this.$message.success('保存成功！')
          })
        } else {
          this.$message.error('表单填写有误，请检查！')
          return false
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ {
  .el-input {
    width: 100px;
    margin: 0 5px;
  }
  // 处理input type = number的上下箭头
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
}
.security-container {
  background-color: #FFFFFF;
  padding: 10px;
  .security-title {
    margin-bottom: 20px;
  }
  .security-one, .security-two, .security-tip {
    display: flex;
    align-items: center;
    margin: 20px 50px;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }
  .security-tip {
    color: #999999;
  }
}
</style>
